<template>
    <div
        class="loginClass"
        :style="`left:${container.left}px;top:${container.top}px`"
    >
        <div class="loginClass1"></div>
        <div class="login_panel_form">
            <SigninCom />
        </div>
    </div>
</template>
<script setup lang="ts">
import SigninCom from "./login/index.vue";
import { reactive } from "vue";

const container = reactive({
    top:
        ((window.innerHeight ||
            document.documentElement.clientHeight ||
            document.body.clientHeight) -
            700) /
        2,
    left:
        ((window.innerWidth ||
            document.documentElement.clientWidth ||
            document.body.clientWidth) -
            1500) /
        2,
});

const resizeChange = () => {
    window.onresize = () => {
        const top =
                ((window.innerHeight ||
                    document.documentElement.clientHeight ||
                    document.body.clientHeight) -
                    700) /
                2,
            left =
                ((window.innerWidth ||
                    document.documentElement.clientWidth ||
                    document.body.clientWidth) -
                    1500) /
                2;
        container.left = left;
        container.top = top;
    };
};
resizeChange();
</script>
<style lang="scss" src="./App.scss"></style>
